﻿@model Himall.Model.TopicInfo
@{
    ViewBag.Title = "推荐专题";
    var TopicInfo = (IEnumerable<Himall.Model.TopicInfo>)ViewBag.TopicInfo;
}


<div class="warp">       
	<ul  class="topic-list cl" id="topicUl">
		@foreach (var item in (TopicInfo))
		{
			<li>
				<h3>@item.Name</h3>
				<a href="./Detail/@item.Id"><img alt="@item.Name" src="@item.TopImage" /></a>
			</li>
		}
	</ul>
</div>
<div class="loading" id="autoLoad"><span></span></div>
<script>
    var page = 1;
    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();

        if (scrollTop + windowHeight >= scrollHeight - 30) {
            loadTopics(++page);
        }
    });
    (function ($) {
        var li = $('#topicUl').find('li');
        if (li.length == 0) {
            $('#autoLoad').html('没有推荐专题');
        }
    })($);

    function loadTopics(page) {
        var url = 'List';
        $.post(url, { page: page, pageSize:5 }, function (result) {
            var html = '';
            if (result.data.length > 0) {
                $.each(result.data, function (i, topic) {
                    html += ' <li><h3>' + topic.name + '</h3><a href="./Detail/' + topic.id + '"><img alt="' + topic.name + '" src="'+topic.topimage+'" /></a></li>';
                });
                $('#topicUl').append(html);
            }
            else {
                $('#autoLoad').html('没有更多专题了');
            }
        });
    }
</script>